<template>
  <div id="comments">
    <div id="comments-main">
      <el-table
        :data="newcomments"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="编号"
          align="center"
        />
        <el-table-column
          prop="content"
          label="评论内容"
          align="center"
        />
        <el-table-column
          prop="commentTime"
          label="评论时间"
          align="center"
        />
        <el-table-column
          prop="orderId"
          label="产品ID"
          align="center"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="deletecomments(scope.row.id)">删除</el-button>
            <el-button type="text" @click="auditcomments(scope.row.id,scope.row.status)">{{ commentsId }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="comments-footer">
      <div class="block">
        <el-pagination
          :current-page.sync="currentPage1"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      comments: [],
      currentPage1: 1,
      total: 0,
      pageSize: 6,
      dataShow: [],
      pageNum: 1,
      totalPage: [],
      commentsId: '拒绝审核'
    }
  },

  computed: {
    // 计算分页
    newcomments() {
      var self = this
      this.pageNum = Math.ceil(self.total / self.pageSize) || 1

      for (let i = 0; i < this.pageNum; i++) {
        this.totalPage[i] = this.comments.slice(self.pageSize * i, self.pageSize * (i + 1))
      }
      this.dataShow = this.totalPage[self.currentPage1 - 1]
      return this.dataShow
    },
    // 设置下一页
    newPage() {
      if (this.currentPage1 === this.pageNum - 1) return
      this.dataShow = this.totalPage[++this.currentPage1]
    },
    // 设置上一页
    prePage() {
      if (this.currentPage1 === 0) return
      this.dataShow = this.totalPage[--this.currentPage1]
    }
  },
  created() {
    this.findAllcomments()
  },

  methods: {

    // 给审核按钮绑定事件
    auditcomments(id, status) {
      var id = id
      var status = status
      //  通过审核
      if (status == '审核不通过') {
        this.$axios.get('/comment/commentExamine', { params: { id }}).then(response => {
          this.commentsId = '审核通过'
        })
      } else {
        //  不通过审核
        this.$axios.get('/comment/commentRefuseExamine', { params: { id }}).then(response => {
          this.commentsId = '审核不通过'
        })
      }
    },

    // 给删除按钮绑定事件
    deletecomments(id) {
      // console.log(id);
      var self = this
      var id = id
      this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/comment/deleteById', { params: { id }}).then(response => {
          if (response.data.status == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message.error('错了哦，删除失败了')
          }
          self.findAllcomments()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 封装分页查询所有评论信息
    findAllcomments() {
      this.$axios.get('/comment/findAll').then(response => {
        this.comments = response.data.data
        console.log(this.comments)
        this.total = response.data.data.length
      })
    },

    // 设置分页按钮
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.findAllcomments()
    }
  }
}
</script>
<style lang="scss" scoped>
#comments{
  padding: 20px;
  line-height: 20px;
}
</style>
